<template>
  <div>
    <van-search
      shape="round"
      v-model="searchValue"
      placeholder="请输入搜索关键词"
    />
    <div class="search_wrap" v-if="resultList.length === 0">
      <p class="hot_title">热门搜索</p>
      <ul>
        <li
          @click="go(h.first)"
          v-for="(h, index) in hotList"
          :key="index"
          class="hot_item"
        >
          {{ h.first }}
        </li>
      </ul>
    </div>

    <!-- 搜索结果 -->
    <div class="search_wrap" v-else>
      <p class="hot_title">最佳匹配</p>
      <songItem
        v-for="obj in resultList"
        :id="obj.id"
        :key="obj.id"
        :name="obj.name"
        :author="obj.ar[0].name"
        center
      >
      </songItem>
    </div>
  </div>
</template>

<script>
import { hotSearch, searchResult } from "@/api";
import songItem from "@/utils/songItem.vue";
export default {
  components: { songItem },
  data() {
    return {
      searchValue: "",
      hotList: [],
      resultList: [],
      timer: null,
    };
  },
  async created() {
    let a = await hotSearch();
    this.hotList = a.data.result.hots;
  },
  methods: {
    async go(str) {
      this.searchValue = str;
      const res = await searchResult({ type: 1, keywords: this.searchValue });
      this.resultList = res.data.result.songs;
      setTimeout(() => {
        clearInterval(this.timer);
      });
    },
  },
  watch: {
    searchValue(val) {
      clearTimeout(this.timer);
      if (val.length === 0) return (this.resultList = []);
      this.timer = setTimeout(async () => {
        const res = await searchResult({ type: 1, keywords: val });
        this.resultList = res.data.result.songs;
      }, 500);
    },
  },
};
</script>
<style scoped>
/* !important强制覆盖 */
/deep/ .van-field__control {
  font-size: 14px !important;
}
.hot_title {
  font-size: 0.32rem;
  color: #666;
}

.search_wrap {
  padding: 0.266667rem;
}

.hot_search {
  padding: 0.266667rem;
}

.hot_name_wrap {
  margin: 0.266667rem 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 0.7rem;
  margin-right: 0.19rem;
  margin-bottom: 0.1rem;
  padding: 0 0.3rem;
  font-size: 0.3rem;
  line-height: 0.7rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}

.search-icon {
  font-size: 23px;
  line-height: inherit;
}
</style>